<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <div class="box">123</div>
    
</body>
<script>
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    
    /**
     * 特殊属性class ==> className
     * class 是一个特殊的关键字： class声明类的js关键字
     * 
     * 真实dom元素用的也是className
     * 虚拟dom最终会render成真实dom并渲染，所以也是用className
     * 
     * 
     * 如果元素标签没有属性呢？
     * 
     * 第二个参数需要占位： {}、null、undefined
     *  
     */
    // const span = React.createElement('span', {class:'bg2'}, 123); 
    const span = React.createElement('span', {className:'bg2'}, 123); 
    //valid DOM property `class`. Did you mean `className`?
 
    root.render(span);

    console.dir(document.querySelector('.box'));// 打印真实dom结构查看class

    // 以下三种是推荐的占位方式
    // const p = React.createElement('p',{},222);
    // const p = React.createElement('p',null,222);
    // const p = React.createElement('p',undefined,222);

    // 以下占位方式可以渲染并且不报错，但是不推荐这么写
    // const p = React.createElement('p','',222);
    // const p = React.createElement('p',123123,222);
    const p = React.createElement('p',function(){},222);
    root.render(p);
</script>
</html>